<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="base.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>饮食信息录入</title>
		<script type="text/javascript" src="static/js/common-css.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
		<style type="text/css">
			.bg-white {
				padding-left: 20px;
				padding-top: 20px;
			}

			.bg-white .input-material {
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="col-lg-6 bg-white">
			<div class="form d-flex align-items-center">
				<div class="content">
					<div class="form-group">
						<span>昵称</span>
						<input id="body-nickname" class="input-material" type="text" name="nickName" disabled="disabled"
						 value="${ user.nickName }">
					</div>
					<div class="form-group">
						<span>食物名称</span>
						<input id="body-foodName" class="input-material" type="text"
						 name="lowBloodPressure" placeholder="请输入食物名称">
						<div class="invalid-feedback">食物名称不能为空</div>
					</div>
					<div class="form-group">
						<span>食物单位</span>
						<input id="body-foodUnit" class="input-material" type="text"
						 name="highBloodPressure" placeholder="请输入食物单位">
						<div class="invalid-feedback">食物单位不能为空</div>
					</div>
					<div class="form-group">
						<span>食物卡路里含量</span>
						<input id="body-foodCalorie" class="input-material" type="text"
						 name="heartRate" placeholder="卡路里含量">
						<div class="invalid-feedback">卡路里含量不能为空</div>
					</div>
					<div class="form-group">
						<span>食物重量</span>
						<input id="body-foodWeight" class="input-material" type="text" onkeyup="clearNoNum(this)"
													 name="weight" placeholder="请输入食物重量">
						<div class="invalid-feedback">食物重量不能为空</div>
					</div>
					<div class="form-group">
						<span>食物类型</span>
						<select id="body-foodType" class="input-material form-control" name="appetite">
							<option>-请选择-</option>
							<option value="谷类及薯类">谷类及薯类</option>
							<option value="动物性食品">动物性食品</option>
							<option value="豆类和坚果">豆类和坚果</option>
							<option value="蔬菜、水果和菌藻类">蔬菜、水果和菌藻类</option>
							<option value="纯热能食品">纯热能食品</option>
						</select>
						<div class="invalid-feedback">请选择食物类型</div>
					</div>
					<div class="form-group">
						<span>摄入时段</span>
						<select id="body-foodDate" class="input-material form-control" name="body-foodDate">
						<option>-请选择-</option>
						<option value="早上">早上</option>
						<option value="中午">中午</option>
						<option value="晚上">晚上</option>
						<option value="其他">其他</option>
					</select>
						<div class="invalid-feedback">请选择食物摄入时段</div>
					</div>
					<div class="form-group">
						<button id="submit" type="button" name="submit" class="btn btn-primary">打卡</button>
						<button id="reset" type="reset" name="reset" class="btn btn-primary" style="margin-left: 40px">重置</button>
					</div>
				</div>
			</div>
		</div>
		<script src="static/js/common-js.js"></script>
		<script>
			$(function() {
				/*错误class  form-control is-invalid
				正确class  form-control is-valid*/
				var flaglowBloodPressure = false;
				var flagHighBloodPressure = false;
				var flagHeartRate = false;
				var flagTemperature = false;
				var flagAppetite = false;
				var flagFoodDate = false;
				var lowBloodPressure, highBloodPressure, heartRate, temperature, appetite,foodDate;
				$("#body-foodName").change(function() {
					lowBloodPressure = $(this).val();
					if (!lowBloodPressure ) {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flaglowBloodPressure = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flaglowBloodPressure = true;
					}
				})
				$("#body-foodUnit").change(function() {
					highBloodPressure = $(this).val();
					if (!highBloodPressure) {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flagHighBloodPressure = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flagHighBloodPressure = true;
					}
				})
				$("#body-foodCalorie").change(function() {
					heartRate = $(this).val();
					if (!heartRate) {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flagHeartRate = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flagHeartRate = true;
					}
				})
				$("#body-foodWeight").change(function() {
					temperature = $(this).val();
					if (!temperature) {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flagTemperature = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flagTemperature = true;
					}
				})
				$("#body-foodType").change(function() {
					appetite = $(this).val();
					if (!appetite || appetite == '-请选择-') {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flagAppetite = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flagAppetite = true;
					}
				})

				$("#body-foodDate").change(function() {
					foodDate = $(this).val();
					if (!foodDate || foodDate == '-请选择-') {
						$(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
						flagFoodDate = false;
					} else {
						$(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
						flagFoodDate = true;
					}
				})

				
				$("#submit").click(function() {
					if (flaglowBloodPressure && flagHighBloodPressure && flagHeartRate && flagTemperature && flagAppetite && flagFoodDate ) {
						$.ajax({
							url: "${baseurl}/health/saveBodyFoodInfo",
							type: 'POST',
							dataType: "json",
							contentType: "application/json",
							data: JSON.stringify({
								'foodName': lowBloodPressure,
								'foodUnit': highBloodPressure,
								'foodCalorie': heartRate,
								'foodWeight': temperature,
								'foodType': appetite,
								'foodDate': foodDate,

							}),
							success: function(data) {
								alert(data.message)
								if (data.result == true) {
									$("input").each(function() {
										$(this).removeClass("form-control is-invalid").val("");
									});
									$("#body-foodType").removeClass("is-valid is-invalid").val("-请选择-");
									$("#body-foodDate").removeClass("is-valid is-invalid").val("-请选择-");
									$("#body-nickname").val('${user.nickName}');
								} else {
									if (data.path) {
										top.location.href=data.path;
									}
								}
							}
						});
					} else {
						if (!flaglowBloodPressure) {
							$("#body-foodName").addClass("form-control is-invalid");
						}
						if (!flagHighBloodPressure) {
							$("#body-foodUnit").addClass("form-control is-invalid");
						}
						if (!flagHeartRate) {
							$("#body-foodCalorie").addClass("form-control is-invalid");
						}
						if (!flagTemperature) {
							$("#body-foodWeight").addClass("form-control is-invalid");
						}
						if (!flagAppetite) {
							$("#body-foodType").addClass("form-control is-invalid");
						}
						if (!flagFoodDate) {
							$("#body-foodDate").addClass("form-control is-invalid");
						}
					}
				})
				// 重置
				$("#reset").click(function() {
					$("input").each(function() {
						$(this).removeClass("form-control is-invalid").val("");
					});
					$("#body-foodType").removeClass("is-valid is-invalid").val("-请选择-");
					$("#body-foodDate").removeClass("is-valid is-invalid").val("-请选择-");
					$("#body-nickname").val('${user.nickName}');
				})
			})
		</script>
	</body>
</html>
